<template>
  <div ref="containerRef" v-loading="loading" class="blog-list-container">
    <ul>
      <li v-for="item in data.rows" :key="item.id">
        <div v-if="item.thumb" class="thumb">
          <RouterLink :to="{ name: 'BlogDetail', params: { id: item.id } }">
            <img :alt="item.title" :src="item.thumb" :title="item.title" />
          </RouterLink>
        </div>
        <div class="main">
          <RouterLink :to="{ name: 'BlogDetail', params: { id: item.id } }">
            <h2>{{ item.title }}</h2>
          </RouterLink>
          <div class="aside">
            <span>日期：{{ item.createDate }}</span>
            <span>浏览：{{ item.scanNumber }}</span>
            <span>评论：{{ item.commentNumber }}</span>
            <RouterLink
                :to="{ name: 'CategoryBlog', params: { categoryId: item.category.id } }"
                class=""
            >{{ item.category.name }}
            </RouterLink
            >
          </div>
          <div class="desc">
            {{ item.description }}
          </div>
        </div>
      </li>
    </ul>
    <!-- 分页放到这里 -->
    <Pager
        v-if="data.total"
        :current="routeInfo.page"
        :limit="routeInfo.limit"
        :total="data.total"
        :visibleNumber="10"
        @pageChange="handlePageChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { getBlogList } from '@/api/blog'
import Pager from '@/components/Pager/index.vue'
import { useFetchData } from '@/hooks/useFetchData'
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMainScroll } from '@/hooks/useMainScroll'
import type { Ref } from 'vue-demi'

const containerRef = ref<HTMLElement | null>(null)

const route: any = useRoute()
const router = useRouter()

useMainScroll(containerRef as Ref<HTMLDivElement>)

const routeInfo = computed(() => {
  const categoryId = +route.params.categoryId || -1
  const page = +route.query.page || 1
  const limit = +route.query.limit || 10
  return {
    categoryId,
    page,
    limit
  }
})

const fetchData = () => {
  return getBlogList({
    page: routeInfo.value.page,
    limit: routeInfo.value.limit,
    categoryid: routeInfo.value.categoryId
  }).then((res) => res.data)
}

const { data, loading, refresh } = useFetchData<{ total: number; rows: any[] }>({
  defaultValue: { total: 0, rows: [] },
  fetchData: fetchData
})

watch(
    () => route,
    async () => {
      loading.value = true
      containerRef.value?.scrollTo(0, 0)
      await refresh()
      loading.value = false
    },
    {
      deep: true
    }
)

const handlePageChange = (newPage: number) => {
  const query = {
    page: newPage,
    limit: routeInfo.value.limit
  }
  if (routeInfo.value.categoryId === -1) {
    // 当前没有分类
    // /article?page=${newPage}&limit=${this.routeInfo.limit}
    router.push({
      name: 'Blog',
      query
    })
  } else {
    // /article/cate/${this.routeInfo.categoryId}?page=${newPage}&limit=${this.routeInfo.limit}
    router.push({
      name: 'CategoryBlog',
      query,
      params: {
        categoryId: routeInfo.value.categoryId
      }
    })
  }
}
</script>
<style lang="less" scoped>
@import '@/styles/var.less';

.blog-list-container {
  line-height: 1.7;
  position: relative;
  padding: 20px;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

li {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid @gray;

  .thumb {
    flex: 0 0 auto;
    margin-right: 15px;

    img {
      display: block;
      max-width: 200px;
      border-radius: 5px;
    }
  }

  .main {
    flex: 1 1 auto;

    h2 {
      margin: 0;
    }
  }

  .aside {
    font-size: 12px;
    color: @gray;

    span {
      margin-right: 15px;
    }
  }

  .desc {
    margin: 15px 0;
    font-size: 14px;
  }
}
</style>